<template>
	<view class="">
		<view :class="isFixed ? 'fixed-top':''" class="wrap-tabs bg-color-w  flex h-50" :style="{'top': hasTop ? getStorage('top')+44+'px' : ''}">
			<scroll-view :scroll-into-view="tabsId" scroll-x="true">
				<view class="flex h-50">
					<view @click="choose(index)" :id="'tabs'+index" v-for="(item,index) in tabs" :class="[active == index ?'active' : 't-color-6',tabs.length > 5 ? 'w20' : 'flex-1']"  class="flex  f-s-0 f-c f-a-c f-j-c p-r">
						<text class="f13-size margin-b4">{{item.name}}</text>
					</view>
				</view>
				
			</scroll-view>
			
		</view>
		<view v-if="isFixed" class="h-50"></view>
	</view>
</template>
<style scoped>
	/* #ifdef H5 */
	.wrap-tabs {
		top: 0px;
	}
	/* #endif */
	.w20 {
		width: 20%;
	}
	.active::after {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 8px;
		margin: auto;
		content: '';
		width: 24px;
		height: 4px;
		background-color: #000;
		border-radius: 2px;
	}
</style>
<script>
	const API = require('../../utils/api/common.js').default;
	const $ = require('../../utils/api.js');
	let self = this;
	export default {
		props:{
			tabs: {
				type: Array,
				require: true
			},
			isFixed: {
				type: Boolean,
				default: true
			},
			maxLength: {
				default: 5
			},
			hasTop: {//默认系统header无需计算
				type: Boolean,
				default: false
			}
		},
		components: {},
		data() {
			return {
				active: 0,
			};
		},
		onLoad: function(options) {
			self = this;
			this.init();
		},
		onShow() {
		},
		methods: {
			choose(index) {
				this.active = index;
				this.$emit('onChange',index);
			},
			init() {},
		},
		computed: {
			tabsId () {
				if(this.active > 4) {
					return 'tabs'+this.active
				}
			}
		},
		created() {
		},
		mounted() {},
		destroyed() {},
		onPullDownRefresh() {
		},
		onReachBottom() {
			
		}
	}
</script>